<template>
    <div class="barCode" id="barCode">
        <vmHead></vmHead>
        <div class="barCode-box">
            <p>条形码</p>
            <div class="demo-input-suffix">
                <div class="sousuo">
                    <div class="erCode"></div>
                    <input v-model="inputVal" placeholder="直接输入或扫描条形码自动生成进行查看套餐信息" type="search" @keyup.enter="getResource" autofocus="autofocus" />
                    <button @click="getResource">搜索</button>
                </div>
            </div>
            <div class="modelPop" v-if="isMonLay">
                <img src="../../static/img/loading.png" class="imgRotate" alt="">
            </div>
            <div v-if="!isShow" class="notInfo">
                <img :src="pubnoData" alt="" class="icon-noData">
            </div>
            <div class="demo-side" v-if="isShow">
                <p>学生信息</p>
                <ul class="studentInf">
                    <li>
                        <label>姓名：</label><span>{{professUser.name}}</span>
                        <label>身份证：</label><span>{{professUser.id_card}}</span>
                    </li>
                    <li>
                        <label>院系：</label><span>{{professUser.courtyard_department}}</span>
                        <label>专业：</label><span>{{professUser.classes}}</span>
                    </li>
                </ul>
                <p>套餐信息</p>
                <ul class="payment">
                    <li>套餐名称：{{professUser.templates_name}}</li>
                </ul>
                <el-table :data="professList" border style="width: 100%">
                    <el-table-column prop="charge_name" label="名称" align="center"></el-table-column>
                    <el-table-column prop="money" label="单价（元）" align="center"></el-table-column>
                    <el-table-column prop="receive_time" label="发放时间" align="center">
                        <template slot-scope="scope"> {{scope.row.state == 1?'暂无数据':scope.row.receive_time}} </template>
                    </el-table-column>
                    <el-table-column prop="admin_user" label="发放人" align="center">
                        <template slot-scope="scope"> {{!scope.row.admin_user?'暂无数据':scope.row.admin_user}} </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button :style="scope.row.state == 1 ? blue : gray" size="mini" @click="issued(scope.$index, scope.row)">{{scope.row.state==1?'点击发放':'已发放'}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import vmHead from './common/mainHeader'
    import apis from '../apis/apis'
    export default {
        data() {
            return {
                isMonLay: false,
                isShow: false,
                tableData: [],
                inputVal: '185110101002',
                professList: [],
                professUser: {},
                pubnoData: '../../static/img/zanwu.png',
                searchName: {
                    name: ''
                },
                gray: {
                    background: '#ebeef5'
                },
                blue: {
                    background: 'rgb(0, 182, 255)',
                    color: '#ffffff'
                }
            }
        },
        components: {
            vmHead
        },
        created() {
            var self = this;
            self.isMonLay = true;
        },
        mounted() {
            var self = this;
            this.notInfo();
        },
        beforeRouteLeave(to, from, next) {
            if(to.name == "index") {
                sessionStorage.clear();
                this.$router.push('/login');
            } else {
                next();
            }
        },
        methods: {
            /* 点击发放 */
            issued(index, rowData) {
                var self = this;
                console.log(rowData);
                if(rowData.state == 2) {
                    self.$message('套餐资源已发放，清及时取出并物资领取');
                    return false;
                }
                var params = {
                    pay_id: rowData.id
                }
                apis.contApi.issueGoods(params).then(res => {
                    console.log(res);
                    if(res.data.code == 0) {
                        self.getResource();
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            getResource() {
                var self = this;
                if(!self.inputVal) {
                    this.$message('请输入搜索序列号');
                    return false;
                }
                var params = {
                    notice_number: self.inputVal
                }
                apis.contApi.getAdminStudentResource(params).then(res => {
                    if(res.data.code != 0) {
                        self.isShow = false;
                        self.notInfo('msg');
                        return false;
                    } else {
                        self.isShow = true;
                    }
                    if(!res.data.data) {
                        self.isShow = false;
                        self.notInfo('msg');
                        return false;
                    }

                    if(res.data.data.state == 0) {
                        self.notInfo('msg');
                        self.isShow = false;
                        return false;
                    } else {
                        self.isMonLay = true;
                    }
                    self.professList = res.data.data.list.items;
                    self.professList.sort((a, b) => b.state - a.state);
                    self.professUser = res.data.data.list.stu;
                    self.notInfo();
                }).catch(err => {
                    self.isShow = false;
                    self.notInfo('msg');
                    console.error(error);
                });
            },
            notInfo(res) {
                var self = this;
                setTimeout(() => {
                    self.isMonLay = false;
                    if(res == 'msg') {
                        let warn = '请前往缴费，然后领取你的物资';
                        this.$message({
                            showClose: true,
                            message: warn
                        });
                        // self.pubnoData = 'static/img/user.jpeg';
                    } else {
                        let warn = '暂无数据'
                        self.pubnoData = '../../static/img/zanwu.png';
                    }
                }, 1000);
            },
        }
    }
</script>

<style>
    .modelPop {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }
    
    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    
    .imgRotate {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        -webkit-transform: rotate(360deg);
        animation: rotation 0.4s linear infinite;
        -moz-animation: rotation 0.4s linear infinite;
        -webkit-animation: rotation 0.4s linear infinite;
        -o-animation: rotation 0.4s linear infinite;
    }
    
    .demo-input-suffix {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .sousuo {
        width: 700px;
        height: 32px;
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 0px 0 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 4px;
    }
    
    .sousuo .erCode {
        width: 60px;
        height: 100%;
        background: url(../../static/img/qr_code.png);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .sousuo input {
        border: none;
        background: transparent;
        width: 500px;
        height: 100%;
        outline: none;
        text-indent: 6px;
        padding-right: 10px;
    }
    
    .sousuo>button {
        width: 140px;
        border: none;
        background: transparent;
        background-color: rgb(111, 140, 184);
        border: 1px solid rgb(111, 140, 184);
        color: white;
        outline: none;
        border-left: 1px solid #ddd;
        cursor: pointer;
    }
    
    .barCode {
        background: #fff;
        height: 100%;
        overflow-y: auto;
    }
    
    .barCode .barCode-box>p {
        text-align: center;
        line-height: 45px;
    }
    
    .barCode .barCode-box {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .demo-side {
        padding: 10px 20px;
        border: 1px solid #f5f5f5;
    }
    
    .demo-side>p {
        font-size: 17px;
        height: 48px;
        line-height: 48px;
    }
    
    .demo-side .studentInf {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding: 0 15px;
    }
    
    .demo-side .studentInf li {
        height: 30px;
    }
    
    .demo-side .studentInf li label {
        width: 80px;
    }
    
    .demo-side .studentInf li span {
        width: 180px;
    }
    
    .payment-Detail {
        width: 100%;
        border-collapse: collapse;
        height: 79px;
    }
    
    .payment-Detail tr:nth-child(1) {
        background: #dbdbdb;
    }
    
    .payment-Detail th,
    .payment-Detail td {
        border: 1px solid #000;
    }
    
    .profess-List {
        width: 100%;
        border-collapse: collapse;
    }
    
    .profess-List th,
    .profess-List td {
        border: 1px solid #000;
    }
    
    .payment {
        width: 100%;
        height: 55px;
        background: #5e87b0;
        border-radius: 5px;
        line-height: 17px;
    }
    
    .payment li {
        float: left;
        font-size: 17px;
        padding: 20px;
        color: white;
    }
    
    .notInfo {
        text-align: center;
        margin: 50px;
        font-size: 16px;
    }
</style>